:deep(.arco-breadcrumb){
  margin-bottom: 20px;
}

.user-info{
  @include flex;
  flex-direction: column;
  height: 100%;
  &__container{
    background-color: #fff;
    box-shadow: 4px 5px 16px 0 rgba(4,19,74,0.04);
    border-radius: 10px;
  }
  &__avatar{
    @include flex-align;
    padding: 20px 30px;
    box-sizing: border-box;
    .user-avatar{
      position: relative;
      width: 100px;
      height: 100px;
      margin-right: 60px;
      border-radius: 50%;
      img{
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
      .set-avatar{
        @include flex-inline-flex;
        position: absolute;
        left: 73px;
        bottom: -8px;
        width: 31px;
        height: 31px;
        background-color: #E8F3FF;
        border-radius: 50%;
        border: 2px solid #fff;
        cursor: pointer;
      }
    }
    .user-content{
      @include flex-between;
      width: 528px;
      font-size: 14px;
      line-height: 22px;
      &-item{
        @include flex;
        flex-direction: column;
        justify-items: center;
        color: #4E5969;
        span{
          color: #1D2129;
        }
      }
    }
  }
  &__setting{
    flex:1;
    overflow-y: auto;
    margin-top: 20px;
    .setting-item{
      @include flex-between;
      margin-top: 40px;
      &__pwd{
        font-size: 14px;
        line-height: 22px;
        .title{
          color: #4E5969;
        }
        .info{
          color: #1D2129;
        }
      }
    }
  }
}


:deep(.arco-input-wrapper){
  background-color: #F2F3F5;
}

.phone-code{
  @include flex-between;
  width: 100%;
  &-btn{
    width: 93px;
    height: 32px;
    margin-left: 21px;
    background-color: #fff;
    border-radius: 2px;
    border: 1px solid #007DFF;
    font-size: 14px;
    color: #007DFF;
    line-height: 22px;
  }
}

